<template>
<div class="statistics-rule-wrap">
  <div class="warn-text"><span class="el-icon-info"></span>修改配置项不会影响历史数据</div>
    <el-form
        class="m7-form demo-ruleForm"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
        label-width="100px"
        :label-position="'top'"
      >
        <el-form-item prop="quickHangupSec">
          <span slot="label">
            客户速挂
            <p class="label-p">振铃时长小于设置时长内客户主动挂机的通话，记为客户速挂。</p>
          </span>
          <el-input class="custom-width" v-model="ruleForm.quickHangupSec">
            <template slot="append">s</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="incomingEffectiveSec">
          <span slot="label">
            有效摘机
            <p class="label-p">指分配给座席到座席接起之间的时间小于等于设置值的通话数量。</p>
          </span>
          <el-input class="custom-width" v-model="ruleForm.incomingEffectiveSec">
            <template slot="append">s</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="answeredInTimeSec">
          <span slot="label">
            服务水平
            <p class="label-p">即及时应答数，从通话进入技能组队列开始到座席摘机时间小于等于设置值的通话，占进入技能组的通话数的比例。</p>
          </span>
          <el-input class="custom-width" v-model="ruleForm.answeredInTimeSec">
            <template slot="append">s</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="incomingRepeatHour">
          <span slot="label">
            重复来电
            <p class="label-p">在设置的时间范围内号码二次来电的通话数量</p>
          </span>
          <m7Select
            size="mini"
            class="custom-width"
            v-model="ruleForm.incomingRepeatHour"
            :placeholder="'请选择重复来电'"
            filterable
            clearable
            :options="repeatCallOption"
            style="margin-bottom: 10px"
          >
          </m7Select>
        </el-form-item>
        <el-form-item prop="outgoingEffectiveSec">
          <span slot="label">
            有效外呼
            <p class="label-p">座席外呼（不包括预览外呼和自动外呼），双方接听且通话时长大于等于设置值的电话数量。</p>
          </span>
          <el-input class="custom-width" v-model="ruleForm.outgoingEffectiveSec">
            <template slot="append">s</template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button size="mini" type="primary" class="fr" @click="saveFun">保存</el-button>
</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { BasicModule } from '@/store/modules/config/basic'
import { isNumber2 } from '@/utils/validate'
interface RuleFromData {
  quickHangupSec: number,
  incomingEffectiveSec: number,
  answeredInTimeSec: number,
  incomingRepeatHour: number,
  outgoingEffectiveSec: number
}
@Component({
  name: 'StatisticsRule',
  components: {}
})
export default class extends Vue {
  private $message: any
  private $confirm: any
  private repeatCallOption: object[] = [
    { label: '12h', value: 12 },
    { label: '24h', value: 24 },
    { label: '48h', value: 48 },
    { label: '72h', value: 72 }
  ]

  private ruleForm: RuleFromData = {
    quickHangupSec: 5,
    incomingEffectiveSec: 5,
    answeredInTimeSec: 20,
    incomingRepeatHour: 24,
    outgoingEffectiveSec: 10
  }

  private rules: object = {
    quickHangupSec: [{ trigger: 'blur', validator: this.validateNumber }],
    incomingEffectiveSec: [{ trigger: 'blur', validator: this.validateNumber }],
    answeredInTimeSec: [{ trigger: 'blur', validator: this.validateNumber }],
    outgoingEffectiveSec: [{ trigger: 'blur', validator: this.validateNumber }]
  }

  private validateNumber (rule: any, value: string, callback: any) {
    if (!isNumber2(value)) {
      callback(new Error('请输入正整数'))
    } else if ((rule.field === 'quickHangupSec' || rule.field === 'incomingEffectiveSec' || rule.field === 'answeredInTimeSec') && (parseInt(value, 10) < 1 || parseInt(value, 10) > 30)) { // 速挂
      callback(new Error('范围为1~30s'))
    } else if (rule.field === 'outgoingEffectiveSec' && (parseInt(value, 10) < 1 || parseInt(value, 10) > 300)) { // 速挂
      callback(new Error('范围为1~300s'))
    } else {
      callback()
    }
  }

  private handleForm () { // 把string处理成number
    const numberArr = ['quickHangupSec', 'incomingEffectiveSec', 'answeredInTimeSec', 'incomingRepeatHour', 'outgoingEffectiveSec']
    Object.keys(this.ruleForm).forEach((key: string) => {
      if (numberArr.includes(key)) {
        this.ruleForm[key] = Number(this.ruleForm[key])
      }
    })
  }

  private saveFun () {
    (this as any).$refs.ruleFormRef.validate((valid) => {
      if (valid) {
        this.$confirm('修改规则不会影响历史数据，新数据将按照新规则进行统计，是否保存新的统计规则？', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleForm()
          const data = { url: '/call/action/config/metricRule', method: 'POST', data: this.ruleForm }
          BasicModule.BasicCommonAction(data).then((res: any) => {
            if (res && res.success) {
              this.$message({ message: '保存成功', type: 'success' })
            }
          })
        })
      } else {
        return false
      }
    })
  }

  private fetchData () {
    const data = { url: '/call/action/config/metricRule', method: 'GET', data: {} }
    BasicModule.BasicCommonAction(data).then((res: any) => {
      if (res && res.success && res.data) {
        Object.keys(res.data).forEach(key => {
          if (this.ruleForm[key] !== undefined) {
            this.ruleForm[key] = res.data[key]
          }
        })
      }
    })
  }

  private beforeMount () {
    this.fetchData()
  }
}
</script>

<style lang="stylus" scoped>
.warn-text
  background $bgc-reminder
  padding 14px
  margin-bottom 20px
  border-radius 4px
  line-height 1.5
  .el-icon-info
    color $c-warn
    padding-right 6px
    font-size 14px
    vertical-align middle
.label-p
   color $fc-gray3
   margin-top 6px
.statistics-rule-wrap
  border 1px solid $border-main
  box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
  border-radius 10px
  overflow hidden
  padding 24px
  border-radius 10px
  height calc(100% - 40px)
  overflow auto
  box-sizing border-box
.custom-width
  width 200px
</style>
